<template>
  <div style="height: 800px;overflow:auto">
    <el-card class="box-card" v-for="(item,index) in course" :key="index"
                  style="float: left;
  height: 150px;
  width: 250px;
  margin-right: 15px;
  margin-left: 25px;
  margin-bottom: 20px;" body-style="padding:0px">
      <router-link :to="{name:'课程详情',query:{course:JSON.stringify(item)}}" style="text-decoration:none">
    <el-image  :src=item.coursephoto style="height: 150px;width: 250px" >
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <div  class="text item" id="info">
      <h style="font-size: 20px">{{ item.coursename }}</h>
      <p style="font-size: 15px">H{{item.intensity}} {{item.apparatus}}</p>
      <p style="font-size: 15px">{{ item.bodypart }}</p>
    </div>
      </router-link>
  </el-card></div>
</template>

<script>
export default {
  name: "mycourse",
  data() {
    return {
      course:[],
    }
  },
  methods:{
    indexs(){

      var id=sessionStorage.getItem("userId");
      var url = '/course/user/'+id;
      this.$axios.get(url)
        .then( (res)=> {
          this.course=[];
          for (var i = 0; i < res.data.data.length; i++) {
            let row = {} // 定义一个当前添加数据的行
            row.id=res.data.data[i].id;
            row.coursename = res.data.data[i].coursename;
            row.coursebrief = res.data.data[i].coursebrief;
            row.intensity = res.data.data[i].intensity;
            row.apparatus = res.data.data[i].apparatus;
            row.bodypart = res.data.data[i].bodypart;
            row.coursephoto = res.data.data[i].coursephoto;
            row.price = res.data.data[i].price;
            row.audit = res.data.data[i].audit;
            row.stageamount=res.data.data[i].stageamount;
            this.course.push(row);
          }
        }).catch(function (error) {
        console.log(error);
      } );
    }
  },
  created() {
    this.indexs()
  }
}
</script>

<style scoped>
#info{
  position:relative;
  top: -110px;
  left: 10px;
  z-index: 5;
  color: white;
}
</style>
